<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/reading/TeacherProgramB.css" />
		<link rel="stylesheet" href="../../css/vCloak.css" />

	</head>

	<body>

		<div class="main" v-if="list!=''">
			<div class="select" id="select">
				<div type="button" class="mui-btn type">
					<div class="selectiontype" style="color: #666666;" :planUid="title.planUid" v-cloak>{{title.planName}}</div>
					<div class="down"></div>
				</div>
				<!--<div type="button" class="mui-btn popular">
					<div class="selectiontype" style="color: #666666;">正在读</div>
					<div class="down"></div>
				</div>-->
			</div>

			<div class="genre">
				<span id="genreScroll">
						<div class="vv" v-for="list in list" :planUid="list.planUid" v-cloak>{{list.planName}}</div>
					</span>
			</div>

			<!--；列表-->
			<div id="offCanvasContentScroll" class="main mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="mainclass" v-for="data in data" :bookUid="data.bookUid" :bookId="data.bookId">
						<div class="format">
							<img :src="data.bookPic" />
							<span class="yiwancheng" v-if="data.state === 3 && data.isFinished === true" v-cloak>已完成</span>
						</div>
						<div class="detailed">
							<div class="title">
								<div class="title_name" v-cloak>{{data.bookName}}</div>
								<!--<div class="type typee"  v-if="data.completeRate == 100">{{data.completeRate}}%</div>-->
								<!--v-else-if="data.state != 1 && data.state != 0"-->
								<div class="type" v-cloak>{{data.completeRate}}%</div>
							</div>
							<div class="data">
								<div class="type ziff" v-cloak>阅读进度</div>
								<div class="time" v-cloak>{{data.beginDate}}</div>
								<div class="time" v-cloak>{{data.endDate}}</div>
							</div>

							<div class="operation  beginning" v-if="data.state == 0">
								<div class="score" v-cloak>{{data.stateStr}}</div>
								<span class="scoredor" v-cloak>开始打卡</span>
							</div>
							<div class="operation start" v-else-if="data.state == 1">
								<div class="score" v-cloak>{{data.stateStr}}</div>
								<span class="scoredor punchClock" v-cloak>开始打卡</span>
							</div>
							<div class="operation conduct" v-else-if="data.state == 2">
								<div class="score" v-cloak>{{data.stateStr}}</div>
								<span class="scoredor punchClock" v-cloak> 阅读打卡</span>
							</div>
							<!--<div class="operation complete" v-else-if="data.state === 3">
								<div class="score">{{data.stateStr}}</div>
								<span class="scoredor">查看</span>
							</div>-->

							<div class="operation complete" v-else-if="data.state === 3 && data.isFinished === false">
								<div class="score" v-cloak>{{data.stateStr}}</div>
								<span class="scoredor" v-cloak>开始闯关</span>
							</div>
							<div class="operation complete" v-else-if="data.state === 3 && data.isFinished === true">
								<div class="score" v-cloak>{{data.stateStr}}</div>
								<span class="scoredor" v-cloak>查看详情</span>
							</div>

							<div class="operation overdue" v-else>
								<div class="score" v-cloak>{{data.stateStr}}</div>
								<span class="scoredor punchClock">逾期</span>
							</div>

						</div>
					</div>

				</div>
			</div>
		</div>

		<!--<div class="content">
			<div class="empty">
				<img src="../../imges/182578199028286338.png" />
				<div>暂时没有任何计划</div>
			</div>
			<div class="choice"><button type="button" class="mui-btn mui-btn-green">新建计划</button></div>
		</div>-->
		<iframe src="../stacks/noplan.html" width="" height="" class="noplan"></iframe>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common/common.js"></script>
		<script type="text/javascript">
			mui.init()
			window.addEventListener("release", function() {
				common.ajax("student/queryStudentPlan", {
					uid: common.uid,
					token: common.token
				}, function(data) {
					if(data.code == 200) {
						if(data.data.length == 0) {
							return
						}
						teacherProgram.list = data.data
						teacherProgram.title = data.data[0]
						genreajax(data.data[0].planUid)
						setTimeout(function() {
							$(".genre").on("tap", "div", function(e) {
								teacherProgram.data = []
								$(".selectiontype").text($(this).text())
								$(".selectiontype").attr("planuid", $(this).attr("planuid"))
								reduction()
								mask.close()
								genreajax($(this).attr("planuid"))
								e.stopPropagation()
							})
						}, 300)
					} else {
						mui.toast(data.message)
					}
				}, 'get')
			})
			$(".choice").on("tap", function() {
				mui.openWindow({
					url: '../reading/release.html',
					id: '../reading/release.html'
				});
			})
			window.addEventListener("home", function() {
				location.reload();
			})
			window.addEventListener('Chapternumber', function(e) { //执行刷新
				location.reload();
			});

			window.addEventListener('Taskdetails', function(e) { //执行刷新
				location.reload();
			});

			$(".noplan").height($(window).height())
			var mask = mui.createMask(reduction)
			var teacherProgram = new Vue({
				el: '.main',
				data: {
					list: [],
					data: [],
					title: ''
				},
				updated: function() {
					//                    	plus.webview.getWebviewById(activeTab).reload()
					//				},3000)
					mui('.mui-scroll-wrapper').scroll()
				}
			})

			$(document).on("tap", ".punchClock", function(e) {
				var obj = {};
				obj.planuid = $(".selectiontype").attr("planuid");
				obj.bookuid = $(this).parents(".mainclass").attr("bookuid")
				obj.source = 2
				common.open("Chapternumber.html", "Chapternumber.html", obj)
				e.stopPropagation()
			})

			$(document).on("tap", ".complete .scoredor", function(e) {
				var obj = {};
				obj.planuid = $(".selectiontype").attr("planuid");
				obj.bookuid = $(this).parents(".mainclass").attr("bookuid")
				obj.source = 2
				common.open("../Taskdetails/Taskdetails.html", "../Taskdetails/Taskdetails.html", obj)
				e.stopPropagation()
			})
			$(document).on("tap", '.mainclass', function(e) {
				if(!$(e.target).is(".punchClock")) {
					var obj = {};
					obj.planuid = $(".selectiontype").attr("planuid");
					obj.bookuid = $(this).attr("bookuid")
					obj.source = 2
					common.open("../Taskdetails/Taskdetails.html", "../Taskdetails/Taskdetails.html", obj)
				}
			})

			$(this).on("tap", ".select", function(e) {
				var index = $(this).index()
				if($(".genre").eq(index).height() != 0) {
					reduction()
					mask.close()
					return
				}
				var height = $(".genre").eq(index).find("div").eq(0).height() * $(".genre").eq(index).find("div").length
				$(".genre").eq(index).css("height", height)
				$("#genreScroll").height(height)
				$(".down").eq(index).css("transform", "rotate(180deg)")
				$(this).find("div").css({
					"color": "#21B0FD",
					"border-top-color": "#21B0FD"
				})
				mask.show()
				e.stopPropagation()
			})

			window.onload = function() {
				mui('#offCanvasContentScroll').scroll();
			}
			common.ajax("student/queryStudentPlan", {
				uid: common.uid,
				token: common.token
			}, function(data) {
				if(data.code == 200) {
					if(data.data.length == 0) {
						$(".mui-content").hide()
						$(".noplan").show()
						return
					} else {
						$(".mui-content").show()
						$(".noplan").hide()
					}
					//					console.log(JSON.stringify(data.data))
					teacherProgram.list = data.data
					teacherProgram.title = data.data[0]
					genreajax(data.data[0].planUid)
					setTimeout(function() {
						$(".genre").on("tap", "div", function(e) {
							teacherProgram.data = []
							$(".selectiontype").text($(this).text())
							$(".selectiontype").attr("planuid", $(this).attr("planuid"))
							reduction()
							mask.close()
							genreajax($(this).attr("planuid"))
							e.stopPropagation()
						})
					}, 300)
				} else {
					mui.toast(data.message)
				}
			}, 'get')

			function genreajax(txt) {
				common.ajax("student/queryStudentPlanBook", {
						uid: common.uid,
						token: common.token,
						planUid: txt
					},
					function(data) {
						if(data.code == 200) {
							teacherProgram.data = data.data
						} else {
							mui.toast(data.message)
						}
					}, "get")
			}

			function reduction() {
				$(".genre").css("height", 0)
				$(".down").css("transform", "rotate(0deg)")
				$(".select").find("div").css({
					"color": "#333",
					"border-top-color": "#333"
				})
			}
		</script>
	</body>

</html>